import Vuex from 'vuex'
import Vue from 'vue'
import state from './state'
import { Toast } from 'mint-ui'

const syncStorage = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
    window.localStorage.setItem('wg-cart', JSON.stringify(state.list))
    window.localStorage.setItem('wg-userInfo', JSON.stringify(state.userInfo))
    window.localStorage.setItem('wg-address', JSON.stringify(state.address))
  })
}

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state,
  // mutations方法集合是唯一一个更改state的地方，且是同步修改
  // 内部方法有两个参数，第一个是state，第二个是传递的参数，多个参数传递需要使用对象
  mutations: {
    toggleCityPickerVisible (state) {
      state.address.cityPickerVisible = !state.address.cityPickerVisible
    },
    changeCurrentAddress (state, address) {
      state.address.addressProvince = address[0]
      state.address.addressCity = address[1]
    },
    addCart (state, info) {
      if (state.list.some((item) => item.id === info.id)) {
        state.list = state.list.map((item) => {
          if (item.id === info.id) {
            item.count++
          }
          return item
        })
      } else {
        state.list.push(info)
      }
      Toast('添加购物车成功')
    },
    reduceAmount (state, id) {
      state.list = state.list.map((item, index) => {
        if (item.id === id) {
          item.count--
          if (item.count > 0) {
            return item
          } else {
            item.count = 1
            return item
          }
        }
        return item
      })
    },
    addAmount (state, id) {
      state.list = state.list.map((item) => {
        if (item.id === id) {
          item.count++
        }
        return item
      })
    },
    changeState (state, id) {
      state.list = state.list.map((item) => {
        if (item.id === id) {
          item.checked = !item.checked
          return item
        }
        return item
      })
    },
    deleteItem (state, id) {
      state.list = state.list.filter((item) => {
        return item.id !== id
      })
    },
    getuserinfo (state, userInfo) {
      state.userInfo = {
        ...userInfo,
        isLogin: true
      }
    }
  },
  // actions两个参数，其一store，其二传递参数，调用mutations异步修改state
  actions: {
    // getId (store, id) {
    //   console.log(id)
    //   const {
    //     firstId,
    //     lastId
    //   } = id
    //   $http.get('https://m.only.cn/classify/h5/ONLY/h5_list.json')
    //     .then(resp => {
    //       var clothes = resp.data.data.filter(outItem => outItem.classifyId === firstId)[0].list.filter(inItem => inItem.classifyId === lastId)[0]
    //       store.commit('detailInfo', clothes)
    //     })
    // }
  },
  // getters一个参数state，通过state来计算出一个新的值
  getters: {
    totalPrice (state) {
      return state.list.filter((item) => {
        if (item.checked) {
          return item
        }
      }).reduce((result, item) => {
        result += item.count * item.price
        return result
      }, 0)
    },
    totalAmount (state) {
      return state.list.reduce((result, item) => {
        result += item.count
        return result
      }, 0)
    }
  },
  plugins: [syncStorage]
})
